<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import { type PropType, ref, computed, watch, nextTick } from "vue";

const props = defineProps({
  timeData: {
    type: Array as PropType<Array<string>>,
    default: () => []
  },
  requireData: {
    type: Array as PropType<Array<number>>,
    default: () => []
  },
  questionData: {
    type: Array as PropType<Array<number>>,
    default: () => []
  }
});

const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme
});

watch(
  () => props,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      container: ".bar-card",
      color: ["#5456e9", "#47b0ec"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none"
        }
      },
      grid: {
        top: "20px",
        left: "20px",
        right: 0,
        bottom: "20px"
      },
      legend: {
        show: false
      },
      xAxis: [
        {
          type: "category",
          data: props.timeData,
          axisLabel: {
            fontSize: "0.8rem"
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          show: false,
        },
        {
          type: "value",
          show: false,
        }
      ],
      series: [
        {
          yAxisIndex: 0,
          name: "到访人数",
          type: "bar",
          barWidth: 8,
          itemStyle: {
            color: "#5456e9",
            borderRadius: 10
          },
          data: props.requireData
        },
        {
          yAxisIndex: 1,
          name: "成交数量",
          type: "bar",
          barWidth: 8,
          itemStyle: {
            color: "#47b0ec",
            borderRadius: 10
          },
          data: props.questionData
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div ref="chartRef" style="flex: 1; height: 280px" />
</template>
